<template>
  <div class="home-card">
    <video-nav/>
    <!--<el-divider style="margin: 0;"/> -->
    <el-row  alignment="flex-start">
      <el-col
          v-for="o in movieList"
          :key="o.vid"
          :xs="8" :sm="6"
          style="padding: 9px;">
        <router-link :to="'/video/'+ o.vid" style="text-decoration: none;" target="_blank">
          <el-card
              class="box-card"
              shadow="hover"
              :body-style="{ padding: '8px 5px' }">
            <div class="card-div">
              <img :src="o.pic" class="card-image" alt=""/>
            </div>
            <div style="padding: 0;">
          <span
              style="line-height: 26px; font-size: 15px; color:#747373; display: flex; margin-top: 4px; text-overflow: ellipsis; overflow: hidden; width: 90%; white-space: nowrap;">
            <el-tooltip class="box-item" effect="dark" :content="o.title" placement="bottom-end" :show-after="1000">
              <!--需要使用div包裹-->
              <div class="title">
                {{ o.title }}
              </div>
            </el-tooltip>
          </span>
            </div>
          </el-card>
        </router-link>
      </el-col>
    </el-row>
  </div>

</template>

<script>

import VideoNav from "@/components/VideoNav";

export default {

  name: "VideoList",
  components: {VideoNav},
  mounted() {
    let disease = this.$route.query.disease
    //获取
    this.getVideoList(disease)
  },
  data() {
    return {
      movieList: [
        {
          vid: 1,
          title: "\u79cd\u5730\u5427\u5c11\u5e74\u7bc7",
          pic: "https://pic.jegms.com/upload/vod/20230204-1/4abb6423a0900b892fbbb67561ea5132.jpg",
        }
      ]
    }
  },
  methods:{
    // eslint-disable-next-line no-unused-vars
    getVideoList(disease){
      if (disease){
        //如果不在种类表中
        let deparmentsStr = localStorage.getItem("departments")
        let deparments =  JSON.parse(deparmentsStr)
        let flag = 0
        for (let i = 0; i <deparments.length;i++){
          for (let j = 0; j < deparments[i].diseaseList.length;j++){
            if(disease === deparments[i].diseaseList[j]){
              //存在该疾病
              flag = 1;
            }
          }
        }
        if (flag === 0){
          this.$message({
            message: `暂无该疾病视频:${disease}`,
            type: 'warning'
          });
          this.$router.push("/chat")
        }
      }
      this.$store.dispatch('getVideoList', {disease}).then((res) => {
        // 获取Video信息
        this.movieList = res.videosList
      })
    }
  }

}
</script>

<style scoped>
.home-card {
  margin: 0 auto;
  min-width: 994px;
  width: 80%;
}

span.home-card-type {
  float: left;
  margin: 10px;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
}

.home-card-type {
  float: left;
  margin: 10px;
  line-height: 20px;
}

a.home-card-type:hover {
  color: rgb(36, 184, 242) !important;
}

div.card-div {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 50%;
  /* background-color: #ececec; */
}

img.card-image {
  width: 95%;
  height: auto;
  display: block;
  margin: 0 auto;
   /*aspect-ratio: 70/89;*/
  object-fit: cover;
}

span.card-remark {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  border-radius: 2px;
  font-size: 13px;
}

.el-card.box-card {
  width: 100%;
  /*height: 200px;*/
  border-radius: 4px 4px 0 0;
  /* margin: 11px; */
  background-color: white;
  /* border-style: none; */
}
.title{
  margin-left: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 100;
}
.card-div:hover{
  transform: scale(1.1,1.11);
  transition: all 0.6s;
}


</style>
